<template>
  <view class="outBox">
    <u-navbar leftText="我的社区" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text> {{ infoDetails.customerName }}</text>
      </view>
    </u-navbar>
    <view class="bgBox"></view>
    <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>
    <view class="content" :style="{
    			marginTop:menuHeight + 'px',
    		}">
      <view class="bindingBox">
        <view class="user">
          <view class="img">
            <image :src="infoDetails.avatar" mode="scaleToFill"></image>
          </view>
          <view class="dis-flex">
            <view class="name">
              {{ infoDetails.customerName }}
            </view>
          </view>
        </view>
      </view>
      <view class="items1">
        <view class="item1">
          <view class="label">
            <text>业绩</text>
          </view>
          <view class="value">
            <text>{{ infoDetails.performance }}</text>
          </view>
        </view>
      </view>
      <view class="bindList">
        <view class="title">
          <text>他/她的弟弟</text>
        </view>

        <view class="items">
          <view class="item" @click="handleDetails(item)" :style="{
    		            backgroundImage: `url(${itemBg})`,
    		            backgroundSize: '100% 100%'
    		          }" v-for="item in infoDetails.borderList">
            <image :src="item.avatar" mode="scaleToFill"></image>
            <text class="name">{{ item.customerName }}</text>
            <text class="phone">{{ item.phoneNumber }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getWXStatusHeight
} from '@/utils/index.js'

import {
  infoAndBorderList
} from '../../api/api'

import itemBg from "@/static/order/itemBg.png"

export default {
  data() {
    return {
      showInfoBox1: false,
      baseImgUrl: this.$baseImgUrl,
      // 胶囊的宽度
      barWidth: 0,
      menuHeight: 0,
      selectPeople: '1',
      videoUrl: this.$videoUrl,
      // 社区名称
      name: '',
      partAvatar: '',
      fakeImgUrl: '',
      // 分销体系详情
      infoDetails: {},
      itemBg: itemBg,
    }
  },
  onLoad(e) {
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.menuHeight = obj.menuHeight

    this.getDetailsInfo(e.id)
  },
  methods: {
    // 查看详情
    handleDetails(item){
      this.getnav('/pages/manager/brother?id=' + item.id)
    },
    // 获取详情
    async getDetailsInfo(id) {
      const res = await infoAndBorderList(id)
      if(res.code == 200){
        this.infoDetails = res.data
      }
      console.log(res,"res")
    }
  }
}
</script>

<style lang="scss" scoped>
.btns2 {
  margin-bottom: 50rpx;

  .btnOut {
    width: 100% !important;

    .btn {
      width: 100% !important;
    }
  }
}

.btnJs {

  position: relative;

  text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
  }

  image {
    width: 100%;
  }
}

.dis-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32rpx;

  image {
    width: 36rpx !important;
    margin-left: 10rpx;
  }
}

.showInfoBox {
  width: 582rpx;
  box-sizing: border-box;
  padding: 68rpx 50rpx 45rpx;
  position: absolute;
  z-index: 5;
  top: 92%;
  left: 66rpx;
  font-size: 28rpx !important;
  font-weight: 400 !important;

  .tit {
    margin-bottom: 30rpx;
    color: #0FC6C2;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
  }

  .one {
    margin-bottom: 20rpx;
  }
  .text2{
    font-weight: 400;
    color: #FFFFFF;
    line-height: 44rpx;
    text-align: justify;
    font-style: normal;
    margin-bottom: 32rpx;
  }

  .text {
    font-weight: 400;
    color: #FFFFFF;
    line-height: 44rpx;
    text-align: justify;
    font-style: normal;
    margin-bottom: 32rpx;
    display: flex;
    flex-direction: column;

    &:last-child {
      margin-bottom: 0;
    }
  }

  image {
    width: 32rpx;
  }
}


.diaCont {
  .uploadBox {
    margin-top: 52rpx;

    .tit {
      text-align: center;
      font-weight: 600;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      margin-bottom: 38rpx;
    }

    .img {
      text-align: center;

      image {
        width: 196rpx;
      }
    }
  }

  .inputBox {
    width: 552rpx;
    height: 112rpx;
    background: rgba(15, 15, 15, 0.41);
    border-radius: 40rpx;
    border: 2rpx solid #35383b;
    backdrop-filter: blur(7px);
    padiding: 0 32rpx;
    line-height: 112rpx;
    display: flex;
    align-items: center;
    margin-top: 30rpx;
  }

  .btns {
    .btn {
      width: 100% !important;
    }
  }
}

::v-deep .avatar-wrapper {
  background: transparent;
}

.avatar-wrapper {
  background: transparent;
  width: 196rpx;
  height: 196rpx;
  border-radius: 50%;
  overflow: hidden;
  padding: 0 !important;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.btns {
  margin-top: 46rpx;

  .btnOut {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
  }

  .btn {
    font-size: 32rpx;
    text-align: center;
    color: #fff;
    width: 400rpx;
    height: 110rpx;
    line-height: 110rpx;
    background: #0FC6C2;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    position: relative;

    .iconImg {
      width: 32rpx;
      margin-left: 8rpx;
    }

    .myText {
      text {
        font-weight: 600;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

  .btn4 {
    background: #f97609;
  }

  .btnOut4 {
    width: 400rpx;
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(249, 118, 9, 0.25);
  }

}
.content2{
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnBox {
  .btns{
    display: flex;
    justify-content: center;
    margin-top: 60rpx;
  }
  .showInfoBox3{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    background: #000;
    border-radius: 60rpx;
  }
}

.items1 {
  background: rgba(0, 0, 0, 0.52);
  border-radius: 60rpx;
  border: 2rpx solid;
  padding: 48rpx;
  border: 2rpx solid #21253B;
  margin-top: 30rpx;
  backdrop-filter: blur(7px);

  .item1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 112rpx;

    .label {
      font-weight: 500;
      font-size: 28rpx;
      color: #86909C;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }

    .value {
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 28rpx;
      text-align: right;
      font-style: normal;
    }
  }
}

.bindList {
  background: rgba(0, 0, 0, 0.52);
  border-radius: 60rpx;
  border: 2rpx solid;
  padding: 48rpx;
  border: 2rpx solid #21253B;
  margin-top: 30rpx;
  backdrop-filter: blur(7px);

  .items {

    .item {
      margin-top: 30rpx;
      width: 588rpx;
      height: 140rpx;
      background-size: 100% 100%;
      display: flex;
      align-items: center;

      image {
        width: 84rpx;
        height: 84rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        margin-left: 30rpx;
      }

      .name {
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        width: 196rpx;
      }

      .phone {
        font-weight: 500;
        font-size: 28rpx;
        color: #86909C;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
      }

      text {
        margin-left: 30rpx;
      }
    }
  }

  .title {
    font-weight: 400;
    height: 60rpx;
    font-size: 28rpx;
    color: #86909C;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    padding-bottom: 20rpx;
    display: flex;
    align-items: center;
    position: relative;

    image {
      width: 32rpx;
      margin-left: 16rpx;
    }
  }
}

.bindingBox {
  border-radius: 40rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  .user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      width: 240rpx;
      height: 240rpx;
      border-radius: 106rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .name {
      text-align: center;
      font-weight: 600;
      font-size: 40rpx;
      color: #FFFFFF;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

}

.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.content {
  position: relative;
  margin: 40rpx;
  box-sizing: border-box;
  z-index: 9;
  flex: 1;
}

.left-slot {
  color: #fff;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

.outBox {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
